<!--
 * @FileDescription 万用表
 * @Author lz
 * @Date 20230529 13:15:11
 * @LastEditors lz
 * @LastEditTime 20230529 13:15:11
-->
<template>
  <div class="mul_box" v-drag.offset.clamp drag-trigger>
    <div class="Mark">{{ HomeContent.Default.MulData.value.Mark }}</div>
    <div class="Unit">{{ HomeContent.Default.MulData.value.Unit }}</div>
    <div class="Values">{{ HomeContent.Default.MulData.value.Value }}</div>

    <img src="/images/knob.png" @click="rotate" class="knob" />
    <img src="/images/plugBlack.png" class="plug_b" />
    <img src="/images/plugRed.png" class="plug_r" />
    <div class="StylusBox">
      <img
        src="/images/电压表笔-黑-select.png"
        alt=""
        class="Blackwatchpen"
        v-if="
          HomeContent.Default.MulData.value.BlackPenLink == '' &&
          HomeContent.Default.MulData.value.BlackPenSelect
        "
        @click="ClickPenBlack(1)"
      />
      <img
        src="/images/电压表笔-黑-normal.png"
        alt=""
        class="Blackwatchpen nor"
        v-if="
          HomeContent.Default.MulData.value.BlackPenLink == '' &&
          HomeContent.Default.MulData.value.BlackPenSelect == false
        "
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/电压表笔-红-select.png"
        alt=""
        class="Redwatchpen"
        v-if="
          HomeContent.Default.MulData.value.RedPenLink == '' &&
          HomeContent.Default.MulData.value.RedPenSelect
        "
        @click="ClickPenRed(1)"
      />
      <img
        src="/images/电压表笔-红-normal.png"
        alt=""
        class="Redwatchpen nor"
        v-if="
          HomeContent.Default.MulData.value.RedPenLink == '' &&
          HomeContent.Default.MulData.value.RedPenSelect == false
        "
        @click="ClickPenRed(2)"
      />
      <img
        src="/images/电压表笔-黑-null.png"
        class="Blackwatchpen"
        v-if="HomeContent.Default.MulData.value.BlackPenLink != ''"
        @click="ClickPenBlack(2)"
      />
      <img
        src="/images/电压表笔-红-null.png"
        class="Redwatchpen"
        v-if="HomeContent.Default.MulData.value.RedPenLink != ''"
        @click="ClickPenRed(2)"
      />
    </div>
    <div class="operateTab T1">
      <img src="/images/ic_校零.png" class="ico_1" />
      <span class="tabTxt" @click="ZeroCalibration">校零</span>
    </div>
    <!-- <div class="operateTab T2">
            <img src="/images/ic_记录.png" class="ico_1">
            <span class="tabTxt" @click="record">记录</span>
        </div> -->
    <div class="operateTab T3">
      <img src="/images/ic_放回.png" class="ico_1" />
      <span class="tabTxt" @click="OpenMul">放回</span>
    </div>
    <div class="Dis_l">
      {{ HomeContent.Default.MulData.value.BlackPenLink }}
    </div>
    <div class="Dis_r">
      {{ HomeContent.Default.MulData.value.RedPenLink }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  StyleValue,
} from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
const state = reactive({
  redType: false,
  blackType: false,
});
const angle = ref(0);
const angleVal = ref("0deg");
async function rotate() {
  //换挡

  let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
    new ClientMessage.DiagnosisAdapterRequest(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_GEARS
    )
  );
  HomeContent.Default.MulData.value = JSON.parse(newArr.Content).Result;
  if (JSON.parse(newArr.Content).Result.Gear == 1) {
    angle.value = 18;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 2) {
    angle.value = 36;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 3) {
    angle.value = 54;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 4) {
    angle.value = 73;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 5) {
    angle.value = 90;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 6) {
    angle.value = 106;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 7) {
    angle.value = 125;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 8) {
    angle.value = 143;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 9) {
    angle.value = 162;
    angleVal.value = angle.value + "deg";
  }
  if (JSON.parse(newArr.Content).Result.Gear == 0) {
    angle.value = 0;
    angleVal.value = angle.value + "deg";
  }
}
function ClickPenBlack(val: number) {
  state.blackType = !state.blackType;
  if (state.blackType) {
    state.redType = false;
  }
  if (val == 2) {
    //选中
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_BLACKPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_BLACKPEN_SELECT
      )
    );
  }
}
//放回
function OpenMul() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_CLOSE
    )
  );
  HomeContent.Default.MulType.value = false;
}
//校零
function ZeroCalibration() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_ABUTMENT
    )
  );
}
//记录
function record() {
  WebSocketComponent.Default.PostMessage(
    new ClientMessage.DiagnosisAdapterMessage(
      MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_RECORD
    )
  );
}
function ClickPenRed(val: number) {
  state.redType = !state.redType;
  if (state.redType) {
    state.blackType = false;
  }
  if (val == 2) {
    //选中
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_REDPEN_SELECT
      )
    );
  } else {
    WebSocketComponent.Default.PostMessage(
      new ClientMessage.DiagnosisAdapterMessage(
        MessageCode.Default.MsgCodesList.DIAGNOSTIC_MULTIMETER_REDPEN_SELECT
      )
    );
  }
}
onMounted(async function () {});
</script>

<style scoped>
.mul_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 234px;
  height: 500px;
  background-image: url("/images/multimeter.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.knob {
  position: absolute;
  left: 63px;
  top: 281px;
  width: 108px;
  height: 108px;
  transform: rotate(v-bind(angleVal));
}

.StylusBox {
  width: 100px;
  height: 300px;
  position: absolute;
  right: -110px;
  top: 40px;
}

.Blackwatchpen {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 292px;
}

.Redwatchpen {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 292px;
}

.nor {
  top: 2px;
  width: 36px;
  height: 288px;
  margin: 0 2px;
}

.plug_b {
  position: absolute;
  bottom: -33px;
  left: 53px;
  width: 21px;
  height: 85px;
}

.plug_r {
  position: absolute;
  bottom: -33px;
  right: 53px;
  width: 20px;
  height: 85px;
}

.operateTab {
  width: 92px;
  height: 34px;
  background: #000000;
  border-radius: 4px 4px 4px 4px;
  opacity: 0.9;
  line-height: 34px;
  display: table-cell;
  vertical-align: middle;
}

.tabTxt {
  font-size: 16px;
  color: #fff;
}

.tabTxt:hover {
  color: #a2f95e;
}

.ico_1 {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: 5px;
  margin-right: 5px;
}

.T1 {
  position: absolute;
  right: -100px;
  bottom: 120px;
}

.T2 {
  position: absolute;
  right: -100px;
  bottom: 75px;
}

.T3 {
  position: absolute;
  right: -100px;
  bottom: 30px;
}

.Dis_l {
  width: 100px;
  height: 24px;
  background: #000000;
  border-radius: 3px 3px 3px 3px;
  opacity: 0.9;
  position: absolute;
  bottom: -56px;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  color: #fff;
}

.Dis_r {
  width: 100px;
  height: 24px;
  background: #000000;
  border-radius: 3px 3px 3px 3px;
  opacity: 0.9;
  position: absolute;
  bottom: -56px;
  right: 0;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  color: #fff;
}

.Values {
  position: absolute;
  right: 80px;
  top: 90px;
  font-size: 34px;
  color: #000;
  font-weight: 600;
}

.Unit {
  position: absolute;
  right: 50px;
  top: 110px;
  font-size: 14px;
  color: #000;
}

.Mark {
  position: absolute;
  right: 50px;
  top: 70px;
  font-size: 14px;
  color: #000;
}
</style>
